<template>

<div>
  <div style="padding:10px;">
    <el-alert :closable="false" title="发布商品" />
  </div>
  <div>
    <el-form ref="form" :model="goods" label-width="80px">
      <el-form-item label="商品描述">
        <el-input v-model="goods.description"></el-input>
      </el-form-item>
      <el-form-item label="商品价格">
        <el-input v-model="goods.price"></el-input>
      </el-form-item>
      <el-form-item label="商品库存">
        <el-input v-model="goods.stockNum"></el-input>
      </el-form-item>
      <el-form-item label="商品图片">
        <el-upload
          class="avatar-uploader"
          action="https://jsonplaceholder.typicode.com/posts/"
          :show-file-list="false"
          :before-upload="beforeAvatarUpload">
          <img v-if="imageUrl" :src="imageUrl" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>


      <el-form-item label="商品权重">
        <el-select v-model="goods.weight" placeholder="请设置商品权重">
          <el-option label="0" value=0></el-option>
          <el-option label="1" value=1></el-option>
          <el-option label="2" value=2></el-option>
          <el-option label="3" value=3></el-option>
          <el-option label="4" value=4></el-option>
          <el-option label="5" value=5></el-option>
          <el-option label="6" value=6></el-option>
          <el-option label="7" value=7></el-option>
          <el-option label="8" value=8></el-option>
          <el-option label="9" value=9></el-option>
          <el-option label="10" value=10></el-option>
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="onSubmit">立即创建</el-button>
        <el-button>取消</el-button>
      </el-form-item>
    </el-form>
  </div>

</div>





</template>

<script>
    import {ApiService} from "@/api/apiService";


    export default {

      data() {
        return {
          imageUrl: '',
          form: {
            name: '',
            region: '',
            date1: '',
            date2: '',
            delivery: false,
            type: [],
            resource: '',
            desc: ''
          },
          goods:{
            price:null,
            pictureUrl:"",
            description:"",
            stockNum:null,
            weight:null
          }
        }
      },
      methods: {
        open2() {
          this.$message({
            message: '创建商品成功！',
            type: 'success'
          });
        },
        handleChange(row) {
          console.log(row);
          const updateGoodsWeight = new ApiService("/updateGoodsWeight")
          updateGoodsWeight.getParams({
            goodsId:row.id,
            goodsWeight:row.weight
          })

        },
        onSubmit() {
          const inputGoods = new ApiService("/inputGoods")
          inputGoods.getParams({
            userId:1,
            price:this.goods.price,
            description: this.goods.description,
            pictureUrl: this.imageUrl,
            weight: this.goods.weight
          }).then(res=>{
            if(res.data.code==200){
              this.open2()
              location.reload();
            }else {
              console.log("插入失败")
            }
          })



        },
        async beforeAvatarUpload(file) {
          const isJPG = file.type === 'image/jpeg';
          const isLt2M = file.size / 1024 / 1024 < 2;
          console.log(file);
          // const oss = new Ossutil();

          let OSS = require('ali-oss');

          let client = new OSS({
            region: 'oss-cn-chengdu',
            accessKeyId: 'LTAI5tKbKKZo33r8EpDqgGWH',
            accessKeySecret: 'wPzuRowwhcB7brUAwDfTcEIo8hAnBI',
            bucket: 'jingzai-pethome',
          });
          //此时可以自行将文件上传至服务器
          try {
            console.log(new Date().getTime())
            var ti = new Date().getTime()
            let result = await client.put('/img/' + ti + '.jpg', file)
            console.log(result)
            console.log("图片" + result.url)
            this.imageUrl = result.url
          } catch (e) {
            console.log(e);
          }
        },

      }
    }
</script>

<style scoped>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
